<template>
  <div class="comments-area">
    <h4>评论区</h4>
    <div v-for="(item,index) in commentList" :key="item" class="comment-list">
      <div class="single-comment justify-content-between d-flex">
        <div class="user justify-content-between d-flex">
          <div class="thumb">
            <img :src="require('../assets/img/blog/comment_'+ (index %= 2) + '.jpg')" alt="">
          </div>
          <div class="desc">
            <p class="comment">
              {{
                item.comment
              }}
            </p>
            <div class="d-flex justify-content-between">
              <div class="d-flex align-items-center">
                <h5>
                  <a>{{ item.name }}</a>
                </h5>
                <p class="date">{{ item.email }}</p>
              </div>
              <div class="reply-btn">
                <a class="btn-reply text-uppercase">回复</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getComment} from "@/api/blog";

export default {
  name: "comment-list",
  props: ["fileId"],
  async created() {
    await this.getComment()
  },
  data() {
    return {
      commentList: []
    }
  },
  methods: {
    getComment(){
      getComment({
        fileId: this.fileId
      }).then((res) =>{
        if (res != null){
          this.commentList = res
          console.log(this.commentList)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
